<template>
  <div class="container">
    <el-card>
      <div>
        <avue-crud
          :data="data"
          :option="option"
          :page.sync="page"
          @size-change="sizeChange"
          @current-change="currentChange"
        >
          <template slot="menuLeft">
            <el-row :gutter="10">
              <el-col :span="9">
                <div class="lab">时间段 :</div>
                <div class="ipt">
                  <el-date-picker
                    size="mini"
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="lab">订单号 :</div>
                <div class="ipt" style="margin-left:50px;">
                  <el-input size="mini" v-model="value1" placeholder="请输入订单号"></el-input>
                </div>
              </el-col>
              <el-col :span="7">
                <el-button type="primary" size="mini">筛选</el-button>
                <el-button type="primary" size="mini">清空</el-button>
                <el-button type="primary" size="mini">导出</el-button>
              </el-col>
            </el-row>
          </template>

          <template slot="menuLeft">
            <div style="margin-top:8px;"></div>
          </template>
        </avue-crud>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "offlineIncome",
  data() {
    return {
      value: "",
      value1: "",
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10,
      },
      data: [],
      option: {
        align: "center",
        addBtn: false,
        menuAlign: "center",
        refreshBtn: false,
        columnBtn: false,
        menu: false,
        column: [
          {
            label: "订单号",
            prop: "sex",
          },
          {
            label: "金额",
            prop: "sex",
          },
          {
            label: "状态",
            prop: "sex",
          },
          {
            label: "交易时间",
            prop: "sex",
          },
          {
            label: "交易详情",
            prop: "sex",
          },
        ],
      },
    };
  },
  mounted() {
    this.getList();
  },
  watch: {},
  methods: {
    getList() {
      this.page.total = 40;
      this.data = [
        {
          id: 1,
          name: "123",
          sex: "3432",
        },
        {
          id: 2,
          name: "1231",
          sex: "54346 ",
        },
      ];
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.getList();
      this.$message.success("行数" + val);
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.getList();
      this.$message.success("页码" + val);
    },
  },
};
</script>

<style scoped lang='scss'>
.lab {
  float: left;
  font-size: 12px;
  margin-top: 5px;
}

.ipt {
  margin-left: 50px;
}
</style>